<script>
	export default {
		data() {
			return {
				count: 10,
				page: 1
			}
		},
		props: {
			total: {
				type:String,
				default: "16"
			}
		},
		computed: {

			// 获取总页数
			pageTotal() {
				return Math.ceil(parseInt(this.total) / this.count)
			},

			// 获取应该显示多少个页数
			getShowPage() {

				var page = this.page,
					total = this.pageTotal,
					pageArr = [],
					beginPage = 1,
					endPage = 0;

				if(total < 7) {
					pageArr = total

				} else {

					/*
					 * 页面最多显示7页，
					 * 1、一般来说是显示当前页的前三页和后三页。
					 * 2、 如果是第四页之前，就特殊，因为之前已经不满足三页，所以把剩下的页数 加给 endPage，因为后面要显示多些
					 * 3、比如说最多只有10页，那么第7页之后，不满足三页，所以把剩下的页数加给 beginPage，因为前面要显示多些
					 */

					// 如果是 第四页之后的页码，就把剩余的页数加给 endPage
					if(page - 3 <= 1) {
						beginPage = 1

						// page+3 是常规操作，显示当前页后三页
						// 4-page 是 当前页前面不满足三页了，剩余的页数
						// 为什么是4 呢
						// 如果是page 是4，那么前面只能显示3页，那么剩余0页给后面，所以4-4=0 正确
						// 如果是page 是3，那么前面只能显示2页，那么剩余1页给后面，所以4-3=1 正确
						// 如果是page 是2，那么前面只能显示1页，那么剩余2页给后面，所以4-2=2 正确
						endPage = page + 3 + (4 - page)
					}

					// 比如说总共有10页，那么在第七页之后，剩余的页数 加给 beginPage
					else if(page + 3 >= total) {

						// page-3 是常规操作，显示当前页前三页
						// page+3-total 是 当前页后面不满足三页了，剩余的页数
						beginPage = page - 3 - ((page + 3) - total);
						endPage = total;
					}

					// 普通情况，页数 >4 而且 <7 ,这是假设 总页数为10的时候
					else {
						endPage = page + 3;
						beginPage = page - 3;
					}

					// 把所有页码放到一个 数组里面，给 Vue 遍历出来
					for(var i = beginPage; i <= endPage; i++) {
						pageArr.push(i)
					}
				}
				return pageArr;
			}
		},
		methods: {

			// 点击页数
			selectPage(page) {
				this.page = page;

				console.log(page)
				this.$emit("change", page)
			},

			// 上一页
			getLastPage() {
				var page = this.page;

				page <= 1 ? 1 : --page
				this.selectPage(page)
			},

			// 下一页
			getNextPage() {

				var page = this.page,
					totalPage = this.pageTotal;

				page >= totalPage ? totalPage : ++page;

				this.selectPage(page)
			}
		}
	}
</script>

<template>
	<div class="news-pagination">
		<div class="news-pagination-wrapper">
			<div class="news-pagination-navBtn ">
				第&nbsp;{{page}}/{{pageTotal}}&nbsp;页&nbsp;&nbsp; 每页&nbsp;{{count}}&nbsp;条, 共&nbsp;{{total}}&nbsp;条记录
			</div>
			<a class="news-pagination-navBtn navBtnNum" :class="{disabled:page==1}" @click="getLastPage">上一页</a>
			<div class="news-pagination-navBtn navBtnNum" :class="{active:page==i}" v-for="i in getShowPage" @click="selectPage(i)">{{i}}</div>
			<a class="news-pagination-navBtn navBtnNum" :class="{disabled:page==pageTotal}" @click="getNextPage">下一页</a>
		</div>
	</div>
</template>

<style lang="stylus">
	@import "../css/variable.styl";
	.news-pagination {
		padding: 20px 0 10px 40px;
		font-size: 14px;
		&-wrapper {
			margin: 0 auto;
			overflow: hidden;
		}
		&-navBtn {
			float: left;
			border: 1px solid #ccc;
			color: #686868;
			padding: 3px 8px 3px 8px;
			margin: 0px 2px;
			background-color: #f9f9f9;
			height: 20px;
			line-height: 20px;
			cursor: pointer;
			transition: 0.2s;
			margin-bottom: 10px;
			&.navBtnNum {
				&:hover,
				&.active {
					background-color: $light-orange;
					color: #fff;
					border-color: $light-orange;
				}
				&.disabled {
					background-color #ddd
				}
			}
		}
	}
</style>